<script setup lang="ts">
import {ref} from "vue";
import {User, Lock} from "@vicons/tabler";
import {useUserStore} from "@/stores/user.store.ts";
import type {FormInst} from "naive-ui";
import type {ILoginFormData} from "@/types/sign";
import router from "@/router";
import {message} from "@/utils/message.ts";


document.title = "用户登录";
const userStore = useUserStore();


const formRef = ref<FormInst | null>(null);
const isLoading = ref<boolean>(false);
const isRemember = ref<boolean>(false);
const formData = ref<ILoginFormData>({
    username: "regular",
    password: "Regular2025."
});
const formRules = ref({
    username: [{required: true, message: "请输入用户名", trigger: ["blur"]}],
    password: [{required: true, message: "请输入密码", trigger: ["blur"]}]
})


/**
 * 用户登录
 */
const handleUserLogin = () => {
    console.log("formData", formData.value);
    formRef.value?.validate(async (errors: any) => {
        if (!errors) {
            try {
                isLoading.value = true;
                // 1. 用户登录
                await userStore.getUserToken(
                    formData.value.username,
                    formData.value.password
                )
                // 2. 获取用户信息
                await userStore.getUserInfo();
                // 3. 获取用户菜单
                await userStore.getUserMenus();
                // 4. 获取用户菜单
                await userStore.getUserPermission();
                // 5. 跳转至首页，提示登录成功
                await router.push("/");
                message.success("登录成功，即将进入系统");
            } catch (error) {
                console.error("Login Fail", error);
            } finally {
                isLoading.value = false;
            }
        } else {
            console.log("errors", errors);
        }
    })

}
</script>

<template>
    <div class="login-container">
        <div class="login-form">
            <n-form ref="formRef" :model="formData" :rules="formRules" label-placement="left">
                <n-form-item>
                    <div class="logo">
                        <img src="../../assets/image/picture.png" alt="logo"/>
                    </div>
                    <div class="desc">不 闻 见 知 设 计 规 范 👏</div>
                </n-form-item>

                <n-form-item path="username">
                    <n-input v-model:value="formData.username" placeholder="请输入用户名">
                        <template #prefix>
                            <n-icon :component="User"/>
                        </template>
                    </n-input>
                </n-form-item>

                <n-form-item path="password">
                    <n-input v-model:value="formData.password" type="password" placeholder="请输入密码"
                             show-password-on="click">
                        <template #prefix>
                            <n-icon :component="Lock"/>
                        </template>
                    </n-input>
                </n-form-item>

                <n-form-item>
                    <n-checkbox v-model:checked="isRemember">记住我</n-checkbox>
                    <a class="forgot">忘记密码</a>
                </n-form-item>

                <n-form-item>
                    <n-button :loading="isLoading" type="success" block @click="handleUserLogin">
                        登 录
                    </n-button>
                </n-form-item>
            </n-form>
        </div>
    </div>
</template>

<style lang="scss">
.login-container {
    display: flex;
    height: 100vh;
    background: url("@/assets/image/background.svg");
    background-size: cover;

    .login-form {
        margin: auto;
        width: 340px;
        min-height: 200px;

        .logo {
            width: 100%;
            margin: 10px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;

            > img {
                width: 80px;
                height: 80px;
                border-radius: 50%;
            }

            .logo-title {
                font-size: 24px;
                font-weight: 700;
                color: #18A058;
            }
        }

        .desc {
            width: 100%;
            color: gray;
            text-align: center;
            line-height: 40px;
        }

        .forgot {
            font-size: 14px;
            margin-left: auto;

            &:hover {
                color: #18A058;
                cursor: pointer;
            }
        }

        .n-form-item:first-child {
            .n-form-item-blank {
                flex-direction: column;
            }
        }
    }
}
</style>